<template>
  <div class="inspection">
    <div class="table-box">
      <IconTitle title="基本信息" imgUrl="yunwei">
        <span class="slot">品牌管理</span>
      </IconTitle>
      <div class="echarts-box">
        <el-row :gutter="10">
          <el-col :span="8"
            ><div class="echarts-item">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>巡检统计</span>
              </div>
              <div class="total-tj-gz">
                <div class="tj">
                  <span class="top">任务总数</span>
                  <b>3220</b>
                </div>
                <div class="tj">
                  <span class="top">已完成</span>
                  <b class="wancheng">34</b>
                </div>
                <div class="tj">
                  <span class="top">待执行</span>
                  <b class="zhixing">3220</b>
                </div>
                <div class="tj">
                  <span class="top">已过期</span>
                  <b class="guoqi">34</b>
                </div>
              </div>
            </div></el-col
          >
          <el-col :span="8"
            ><div class="echarts-item">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>巡检情况</span>
              </div>
              <div class="main-item">
                <span>最近巡检</span>
                <div class="flex">
                  <span>2021-10-23 ~ 2021-10-239</span>
                  <span>月</span>
                  <span>张如玉</span>
                </div>
              </div>
              <div class="main-item">
                <span>下次巡检</span>
                <div class="flex green">
                  <span>2021-10-23 ~ 2021-10-239</span>
                  <span>月</span>
                  <span>张如玉</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8"
            ><div class="echarts-item">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>巡检情况</span>
                <p>fault</p>
              </div>
              <div id="typeEcharts" style="height: 140px"></div>
            </div>
          </el-col>
        </el-row>
      </div>

    </div>
     <div class="table-box">
      <div class="echarts-box">
        <el-row :gutter="10">
          <el-col :span="16"
            ><div class="echarts-item">
              <IconTitle title="关联计划" imgUrl="yunwei">
                <span class="slot">关联的标准计划</span>
              </IconTitle>
                  <el-table
        :data="deviceData"
        border
        style="width: 100%"
        @selection-change="deviceSelectionChange"
      >
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column prop="date" label="计划编号" align="center">
        </el-table-column>
        <el-table-column prop="name" label="计划名称" align="center">
        </el-table-column>
        <el-table-column prop="name" label="负责人" align="center">
        </el-table-column>
        <el-table-column prop="name" label="循环类型" align="center">
        </el-table-column>
        </el-table-column>
      </el-table>
            </div>
          </el-col>
          <el-col :span="8"
            ><div class="echarts-item">
              <IconTitle title="关联标准" imgUrl="yunwei">
                <span class="slot">关联标准项目</span>
              </IconTitle>
                  <el-table
        :data="deviceData"
        border
        style="width: 100%"
        @selection-change="deviceSelectionChange"
      >
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column prop="date" label="标准编号" align="center">
        </el-table-column>
        <el-table-column prop="name" label="标准名称" align="center">
        </el-table-column>
      </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
      <el-card class="box-card btn-search page-search">
      <div slot="header">
        <div class="btn-box">
          <el-button type="info" icon="el-icon-refresh-left"></el-button>
          <el-button type="check" icon="el-icon-download">导出</el-button>
        </div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="报修编号">
            <el-input
              placeholder="报修编号"
              v-model="searchForm.roleName"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="报修人">
            <el-input
              placeholder="报修人"
              v-model="searchForm.roleCode"
            ></el-input>
          </el-form-item>
          <el-form-item label="故障类型">
            <el-select
              placeholder="故障类型"
              v-model="searchForm.dsType"
              clearable
              style="width: 120px"
            >
              <el-option label="你好" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search">查询</el-button>
            <el-button icon="el-icon-refresh-right">重置</el-button>
          </el-form-item>
        </el-form>
        <div></div>
      </div>
    </el-card>
    <div class="table-box">
      <IconTitle title="保养记录" imgUrl="yunwei">
        <span class="slot">保养记录表</span>
      </IconTitle>
      <!-- 设备文档 -->
      <el-table
        :data="deviceData"
        border
        style="width: 100%"
        @selection-change="deviceSelectionChange"
      >
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column prop="date" label="资料名称" align="center">
        </el-table-column>
        <el-table-column prop="name" label="资料类别" align="center">
        </el-table-column>
        <el-table-column prop="name" label="文档密级" align="center">
        </el-table-column>
        <el-table-column prop="address" label="文件数量" align="center">
        </el-table-column>
        <el-table-column prop="address" label="说明" align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";

import IconTitle from "@/components/icon-title/index.vue";
let typeOption = {
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  color: ["#D75746", "#f29c38", "#02b980"],
  series: [
    {
      type: "pie",
      radius: ["35%", "50%"],
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,
      },
      data: [
        { value: 3, name: "正常：3" },
        { value: 2, name: "异常" },
        { value: 23, name: "漏检" },
      ],
    },
  ],
};
export default {
  name: "inspection",
  components: {
    IconTitle,
  },
  data() {
    return {
      typeOption,
        searchForm: {},
      deviceData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
    };
  },
  mounted() {
    var chartDom = document.getElementById("typeEcharts");
    var myChart = this.$echarts.init(chartDom);
    myChart.setOption(this.typeOption);
  },
 methods: {
    deviceSelectionChange() {},
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/color.scss";
.inspection {
       .total-tj-gz {
          padding: 25px 0 20px 0;
          display: flex;
          .tj {
            width: 50%;
            .top {
              display: block;
              margin-bottom: 10px;
            }
            b {
              font-size: 20px;
            }
            b.wancheng {
              color: $theme;
            }
            b.zhixing {
              color: $colorEdit;
            }
            b.guoqi {
              color: $colorDe;
            }
          }
        }
    .main-item {
          margin-top: 15px;
          .flex {
            padding: 5px;
            background: #f3f5fb;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          .flex.green {
            background: #effcf4;
          }
        }

}
</style>
